import React from 'react'
import {Link} from 'react-router-dom'
import {Typography,Rate,Col,Row} from 'antd'
import './productlist.css'
import {nanoid} from 'nanoid'
interface PropsType{
    productlist:any[]
}
const ProductList:React.FC<PropsType>=(props)=> {
    return(
        <div className="productlist">
            {
                props.productlist.map((item)=>{
                    if(item.touristRoute){
                        item=item.touristRoute
                    }
                    return (
                    <div className="productitem" key={item.id}>
                        <Row>
                            <Col span={14}>
                                <div className="left">
                                    <Link to={`/detail/${item.id}`}>
                                        <div className="searchtitle">
                                            ¥ <span className="before">{item.originalPrice}</span>&nbsp;&nbsp;¥<span className="now">{item.price}</span>
                                            &nbsp;&nbsp;<span>{item.title}</span>
                                        </div>
                                    </Link>
                                    <div className="sign">
                                        <span className="departureCity">{item.departureCity} 出发</span>
                                        <span className="tripType">{item.tripType}</span>
                                        <span className="travelDays">{item.travelDays} 天</span>
                                    </div>
                                    <Typography.Text>{item.description}</Typography.Text>
                                    <div className="rate">
                                        <Rate allowHalf disabled defaultValue={item.rating} />&nbsp;&nbsp;&nbsp;{item.rating}
                                    </div>
                                </div>
                            </Col>
                            <Col span={6} className="productimg">
                                <div className="right">
                                    <img width={270} src={item.touristRoutePictures[0].url}/>
                                </div>
                            </Col>
                        </Row>
                    </div>
                    )
                })
            }
        </div>
    )
}
export default ProductList